<template>
  <el-card
    class="video-monitor work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="video-monitor__header work-bench-team__card__header">
      <span class="work-bench-team__card__title video-monitor__title">视频监控</span>
    </div>
    <div class="work-bench-team__card__body video-monitor__body">
      <div class="video-monitor__menu">
        <div
          class="video-monitor__menu-item"
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in menu"
          :key="item.teamId"
          @click="activeIndex = index"
        >
          <span>{{ item.teamName }}</span>
        </div>
      </div>
      <div class="video-monitor__video">
        <!-- <video
          autoplay
          controls
          width="100%"
          height="100%"
          :src="menu && menu.length ? menu[activeIndex].infoList[0].httpsFmp4 : ''"
        >
          Sorry, your browser doesn't support embedded videos.
        </video> -->
        <!-- 临时替换 -->
        <!-- <CommonVideo id="721777022033670144" /> -->
        <!-- <img src="https://jrjpic.jrjkg.com.cn/guolufang.jpg" style="width: 100%; height: 100%" /> -->
        <video
          src="https://jrjpic.jrjkg.com.cn/guolufangjiankong.mp4"
          style="width: 100%; height: 100%; object-fit: initial"
          controls
          autoplay
          muted
          loop
        />
      </div>
      <!-- <img class="video-monitor__img" :src="img_monitor" /> -->
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import state from './state'
import img_monitor from '../img/monitor.png'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'VideoMonitor',

  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },

  data() {
    return {
      img_monitor,
      ...state(),
    }
  },

  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamVideoList({
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        this.menu = res.content || []
        setInterval(() => {
          this.activeIndex = this.activeIndex === 3 ? 0 : this.activeIndex + 1
        }, 20000)
      })
    })
  },

  destroyed() {
    clearInterval()
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
